<template>
  <div class="tree-container">
    <happy-scroll resize size="6" hide-horizontal>
      <div class="tree-context">
        <el-input
          placeholder="输入关键字进行过滤"
          prefix-icon="el-icon-search"
          clearable
          v-model="filterText"
          class="tree-sreach"
        >
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
        >
        </el-tree>
      </div>
    </happy-scroll>
  </div>
</template>
<script>
import { HappyScroll } from "vue-happy-scroll";
export default {
  components: { HappyScroll },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    renyuanfilterText(val) {
      this.$refs.newtree.filter(val)
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },
  },

  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>
<style lang="scss" scope>
.tree-container {
  height: calc(100vh - 245px);
  width: 280px;
  padding: 15px;
  background: #fffbfbcf;
  .el-tree {
    background: #fffbfbcf;
  }
  .tree-context {
    width: 100%;
    padding: 0px 10px;
    margin-bottom: 20px;
    .tree-sreach {
      width: 250px;
      position: sticky;
      top: 0px;
      z-index: 2;
    }
  }
  .happy-scroll-container .happy-scroll-content {
    width: 100%;
  }
  .happy-scroll-container {
    width: 100% !important;
  }
}
</style>
